<template>
  <div class="box">
    <div class="main">
      <div class="mb20">
        <img src="@/assets/images/examination.png" alt="" />
      </div>
      <div class="f">
        <div>
          <div class="answer">
            <div class="f jcsb aic">
              <div class="mr17 pointer" @click="goPath('/exerciseList')">
                <img src="@/assets/images/exercises.png" alt="" />
              </div>
              <div class="mr17 pointer" @click="goPath('/customTest')">
                <img src="@/assets/images/test-paper-composition.png" alt="" />
              </div>
              <div class="pointer" @click="goPath('/PreviousExam')">
                <img src="@/assets/images/past-exam-paper.png" alt="" />
              </div>
            </div>
            <div class="f jcsb aic mt17">
              <div class="answer-item">
                <div class="f20 mb15">错题本</div>
                <div class="mb10 f14" style="color: #b3bac2">
                  记录有所答错的题目
                </div>
                <el-tag
                  class="pointer"
                  type="danger"
                  effect="plain"
                  round
                  @click="goPath('/correction')"
                >
                  开始练习
                </el-tag>
              </div>
              <div class="answer-item answer-item-bg2">
                <div class="f20 mb15">热门试卷</div>
                <div class="mb10 f14" style="color: #b3bac2">
                  有人最多的答题的题目
                </div>
                <el-tag
                  class="pointer"
                  type="danger"
                  effect="plain"
                  round
                  @click="goPath('/PreviousExam')"
                >
                  开始练习
                </el-tag>
              </div>
            </div>
          </div>

          <div class="statistics mt20">
            <ECharts :options="chartOptions" />
          </div>
        </div>
        <div class="exercise">
          <div class="f jcsb aic pb20">
            <div class="f18 c596269">练习历史</div>
            <!-- <div class="f14 all pointer f aic">
              全部
              <el-icon size="12" color="#b3bac2"><ArrowRightBold /></el-icon>
            </div> -->
          </div>
          <el-divider style="border-color: #f2f2f5; margin: 0px 0px 0px" />
          <div class="exercise-record">
            <div
              class="record-item f aic jcsb bb1"
              v-for="(item, index) in exerciseHistoryList"
              :key="index"
            >
              <div class="mr10">
                <div class="c3c464f exercise-title tem2">{{ item.title }}</div>
                <div class="c94999e f12 mt13">
                  创建时间:{{ parseTime(item.createTime) }}
                </div>
              </div>
              <div class="pointer">
                <el-tag
                  type="danger"
                  effect="light"
                  round
                  size="large"
                  v-if="item.type == 3"
                  @click="goPath('/exercise', item.id)"
                >
                  继续做题
                </el-tag>
                <el-tag
                  v-else
                  type="primary"
                  effect="light"
                  round
                  size="large"
                  @click="goPath('/report', item.id)"
                >
                  查看报告
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ArrowRightBold } from "@element-plus/icons-vue";
import ECharts from "@/components/eCharts/index.vue";
import * as echarts from "echarts";
import { statistics, exerciseHistory } from "@/api/course";
import { parseTime } from "@/utils/util";

const router = useRouter();
const chartOptions = ref({});
const xAxis = ref([]);
const count = ref([]);
const rate = ref([]);
const exerciseHistoryList = ref([]);
const userInfo = JSON.parse(localStorage.getItem("userInfo"));

const getStatistics = () => {
  xAxis.value = [];
  count.value = [];
  rate.value = [];
  statistics().then((res) => {
    res.rows.forEach((item) => {
      xAxis.value.push(item.yearMonth);
      count.value.push(item.count);
      rate.value.push(item.rate);
    });
    chartOptions.value = {
      color: ["#40D5DE", "#257FFB", "#37A2FF", "#FF0087", "#FFBF00"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["做题量", "错题率"],
      },

      grid: {
        top: "20%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: xAxis.value,
        },
      ],
      yAxis: [
        {
          // 第一个 y 轴，用于柱状图
          type: "value",
          name: "做题数",
          position: "left",
          alignTicks: false, // 让两个 y 轴对齐刻度
          axisLine: {
            lineStyle: {
              color: "#40D5DE",
            },
          },
          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          // 第二个 y 轴，用于折线图
          type: "value",
          name: "错题率",
          position: "right",
          alignTicks: false, // 让两个 y 轴对齐刻度
          axisLine: {
            lineStyle: {
              color: "#257FFB",
            },
          },
          axisLabel: {
            formatter: "{value}%",
          },
        },
      ],
      series: [
        {
          name: "做题量",
          type: "line",
          // stack: "Total",
          // smooth: true,
          // showSymbol: false,
          areaStyle: {
            opacity: 0.5,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#40D5DE",
              },
              {
                offset: 1,
                color: "rgba(255, 255, 255, 0)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: count.value,
        },
        {
          name: "错题率",
          type: "line",
          // stack: "Total",
          // smooth: true,
          // showSymbol: false,
          yAxisIndex: 1,
          areaStyle: {
            opacity: 0.5,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#257FFB",
              },
              {
                offset: 1,
                color: "rgba(255, 255, 255, 0)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: rate.value,
        },
      ],
    };
  });
};

const getExerciseHistory = () => {
  exerciseHistory(userInfo.userId).then((res) => {
    exerciseHistoryList.value = res.rows;
  });
};

const goPath = (path, id) => {
  router.push({
    path: path,
    query: { id: id },
  });
};

onMounted(() => {
  getStatistics();
  getExerciseHistory();
});
</script>
<style lang="scss" scoped>
.box {
  background: #f5f7fa;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 100px 0 20px;
  .answer {
    background: #fff;
    border-radius: 10px;
    padding: 17px;
    .answer-item {
      width: 363px;
      height: 137px;
      padding: 30px 16px;
      background: #f4f8ff url("@/assets/images/flag.png") bottom right no-repeat;
      border-radius: 10px;
      :deep(.el-tag) {
        padding: 13px 20px;
      }
    }
    .answer-item-bg2 {
      background: #f4f8ff url("@/assets/images/trophy.png") bottom right
        no-repeat;
    }
  }
  .statistics {
    padding: 20px;
    border-radius: 10px;
    background: #fff url("@/assets/images/statistics.png") top left no-repeat;
  }
  .exercise {
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    width: 358px;
    padding: 17px 0 17px 17px;
    height: 763px;
    .exercise-record {
      height: 691px;
      overflow-y: auto;
      padding-right: 17px;
      .record-item {
        padding: 15px 0;
      }
      .exercise-title {
        line-height: 22px;
        max-height: 44px;
      }
    }
    .c596269 {
      color: #596269;
    }
    .c3c464f {
      color: #3c464f;
    }
    .c94999e {
      color: #94999e;
    }
    .all {
      color: #b3bac2;
    }
    :deep(.el-tag) {
      width: 72px;
      height: 30px;
    }
  }
}
</style>
